import { useState } from 'react';

import { getIsAuth } from '@/entities/auth/model/selectors';
import { useAppSelector } from '@/shared/store';
import { useIsomorphicLayoutEffect } from 'usehooks-ts';

import { authNavItem, navItems } from './nav';

export const useNavItems = () => {
  const [nav, setNav] = useState(navItems);
  const isAuth = useAppSelector(getIsAuth);

  useIsomorphicLayoutEffect(() => {
    setNav(() => (isAuth ? authNavItem : navItems));
  }, [isAuth]);

  return nav;
};
